<template>
    <div id="index">
        <!-- 轮播图 -->
        <cube-slide ref="slide" :data="items" @change="changePage">
            <cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
                <a :href="item.url">
                <img class="banner" :src="item.image">
                </a>
            </cube-slide-item>
        </cube-slide>
        <!-- 滚动分类 -->
        <cube-slide ref="slidelists" :data="lists"  :auto-play="false">
            <cube-slide-item v-for="(list, index) in lists" :key="index">
                <ul class="listul">
                    <li class="listli" v-for="(item,index) in list" :key="index">
                        <a :href="item.url">
                            <img :src="item.image" alt="">
                            <p>{{item.lable}}</p>
                        </a>
                    </li>
                </ul>
            </cube-slide-item>
        </cube-slide>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            items: [],//轮播图数组
            lists: [] //滚动分类组
            }
        },
        methods: {
            changePage(current) {
            console.log('当前轮播图序号为:' + current)
            },
            clickHandler(item, index) {
            console.log(item, index)
            }
        },
        async created(){
            try{
                //获取轮播图数据
                const items=await this.$http.get('/api/banner')
                this.items=items.data
                //获取滚动分类数据
                const lists=await this.$http.get('/api/rollinglist')
                this.lists=lists.data
            }catch(err){
                console.log(err)
            }
        }
    }
</script>

<style lang="scss" scoped>
#index {
    a {
        .banner {
            display:block;
            width: 100%;
            height: 175px;
        }
    }
    .listul {
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        padding: 10px 0;
        .listli {
            width: 20%;
            justify-content: center;
            img {
                width: 38px; 
                height: 38px;
                border-radius: 50%;
                padding:5px 0;
            }
            p {
                font-size: 14px;
                padding-bottom: 10px;
            }
        }
    }
}
</style>